<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="@/assets/images/lunbo2-mig1.jpg"></div>
			<div class="swiper-slide"><img src="@/assets/images/lunbo2-mig2.jpg"></div>
			<div class="swiper-slide"><img src="@/assets/images/lunbo2-mig3.jpg"></div>
			<div class="swiper-slide"><img src="@/assets/images/lunbo2-mig4.jpg"></div>
			<div class="swiper-slide"><img src="@/assets/images/lunbo2-mig5.jpg"></div>
		</div>
		<div class="paginationCon">
			<span v-for="i in 5" :class="[(swiperIndex.index+1) == i ? 'active' : '']"></span>
		</div>
	</div>
</template>
<script>
	import _Swiper from 'swiper/dist/js/swiper.js'
	const Swiper = window.Swiper || _Swiper

	export default{
		name:'bottomBnner',
		data(){
			return{
				swiper:null,
				swiperIndex:{
					index:0
				},
				
			}
		},
		methods:{
			
			mountInstance() {
				const swiperOptions = {
					// pagination: {
					// 	el: this.$el.querySelector('.paginationCon'),
					// 	bulletClass:'',
					// 	bulletActiveClass:'active'
					// },
				}
				this.swiper = new Swiper(this.$el, swiperOptions)
				this.bindEvents()
			},
			bindEvents(){
				let self = this
				this.swiper.on('slideChange', function() {
					self.setSwiperIndex(this.activeIndex)
				});
			},
			setSwiperIndex(index){
				this.$set(this.swiperIndex, 'index', index)
			},
			
		},
		mounted(){
			if (!this.swiper) {
				this.mountInstance()
			}

		}
	}
</script>
<style scoped lang="scss">
@import '@/assets/utils/utils.scss';

.paginationCon{
	position: absolute;
	bottom:50px;
	left:0;
	text-align: center;
	right:0;
	span{
		display: inline-block;
		width: 18px;
		height: 18px;
		border-radius:50%;
		background-color: #b2b2b2;
		margin: 0 5px;
	}
	span.active{
		background-color: $themeColor;

	}
}

.swiper-container{
	width: 100%;
	height: 1290px;

	.swiper-slide{
		width: 100%;
		padding-top:100px;

		img{
			width: 100%;
		}
	}
}


</style>